<template>
    <div>
        <leftBar></leftBar>
        <div class="activity-right"  style="padding-top:20px;">
            <h3>编辑视频</h3>
            <el-form  ref="form" :rules="rules"   :model="form" label-width="110px" v-loading = "divLoading">
                <div class="form">
                    <el-form-item label="视频简介:" prop="videoDesc">
                        <el-input style="width:400px" v-model="form.videoDesc" type="text" :maxlength = "10" placeholder="请输入视频介绍（最多10个字符）"  clearable></el-input>
                    </el-form-item>
                    <el-form-item label="关联活动:" prop="activityName">
                        <el-select filterable style="width:400px" v-model="form.activityId" placeholder="选择活动" @change="handlActivityChange">
                            <el-option v-for="item in activityList" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="关联商品:" prop="goodsName" v-if="form.activityId != ''">
                        <el-select filterable style="width:400px" v-model="form.relation" placeholder="选择商品" @change="handlChange">
                            <el-option v-for="item in goodsList" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="关联商品:" prop="goodsName" v-else>
                        <el-select disabled style="width:400px" v-model="form.relation" placeholder="选择商品" @change="handlChange">
                            <el-option v-for="item in goodsList" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                     <el-form-item label="视频样式:" prop="shape">
                        <template>
                            <el-radio v-model="form.shape" label="1">横图</el-radio>
                            <el-radio v-model="form.shape" label="2">竖图</el-radio>
                        </template>
                     </el-form-item>
                    <el-form-item label="上传视频:" class="uploadWrap" v-loading="videoloadLoading" prop="video">
                        <div class="prevImg" v-if="form.videoUrl">
                            <video width="200" :src="form.videoUrl" controls="controls" loop="loop" alt=""></video>
                            <i class="el-icon-error" @click="deleteVideoList()"></i>
                        <el-progress v-if="progress !== 0" :text-inside="true" :stroke-width="18"   style="width:200px;margin-bottom:10px;" :percentage="progress"></el-progress>
                        </div>
                        <template v-if="form.videoUrl == ''" >
                            <div class="upload">
                                <input id="pickfiles" class="file" name="file" type="file" accept="video/avi,video/mp4,video/flv,video/3gp,video/swf" @change="uploadVideo($event)" />
                                <i class="el-icon-plus"></i>
                            </div>
                        </template>
                        <template v-else>
                            <div class="upload" style="display:inline-block">
                                <input id="pickfiles" class="file" name="file" type="file" accept="video/avi,video/mp4,video/flv,video/3gp,video/swf" @change="uploadVideo($event)" />
                                <span>点击更换</span>
                            </div>
                        </template>
                        <p class="red">
                            <small>必须上传文件后缀为.mp4格式的视频，且视频大小10MB以内</small>
                        </p>
                    </el-form-item>
                    <el-form-item label="视频封面:" prop="bgimgUrl">
                        <img width="200" :src="form.bgimgUrl" alt="">
                     </el-form-item>   
                </div>
            </el-form> 
            <section class="submit"> 
                <el-button type="primary"  @click="submit">确定</el-button>
                <el-button type="primary" style="margin-left:10px" @click="$router.go(-1)">返回</el-button>                        
            </section> 
        </div> 
    </div>
</template>
<script>
    import leftBar from '../commonComponents/leftBar.vue';
    import { getQiniuTokenVideo, qiniuBaseUrl, qiniuVideoBaseUrl, activityList, getActivityGoodsList, goodsVideo, getVideoInfo } from '../../data/postData';
    // import 'qiniu-js'
    export default {
       
        components:{
            leftBar
        },
        data(){
            return{
                user: JSON.parse(localStorage.getItem('ddaigoUser')),      
                getTagByStoreNo: null,          
                form:{
                    videoName: '',
                    videoDesc: '',
                    videoUrl: '',
                    uptoken:'',
                    activityId:'',
                    shape:'',
                    bgimgUrl: ''

                },
                progress:0,
                divLoading:true,
                disabled:false,
                videoloadLoading:false,
                activityList:[],
                goodsList:[],
                rules: {
                    videoDesc: [
                        { required: true, message: '请输入视频介绍', trigger: 'blur' },
                    ],
                    activityName: [
                        { required: true, message: '请选择关联活动', trigger: 'blur' },
                    ],
                    goodsName: [
                        { required: true, message: '请选择商品', trigger: 'blur' },
                    ],
                    video: [
                        { required: true, message: '上传视频', trigger: 'blur' },
                    ],
                    shape: [
                        { required: true, message: '视频样式', trigger: 'blur' },
                    ],
                    bgimgUrl: [
                        { required: true, message: '视频封面', trigger: 'blur' },
                    ],
                   
                   
                },
            }
        },
        mounted(){
            this.$http.get(getQiniuTokenVideo,{params: {wxUid: "", wxSid: ""}}).then(res=>{
                this.form.uptoken = res.data.uptoken
                this.initQiniu()
                console.log(res.data.uptoken,'uptoken')
            })
            this.getActivityList()
         
            //获取视频info
            var params = {
                "data": {
                    "relation": this.$route.params.id
                }
            }
            this.$fetch.post(getVideoInfo, params).then(res => {
                this.form = res.data
                this.getActivityGoods()
            }).catch(err => {
                this.$message({
                    message: err.message,
                    type : 'warning',
                    duration:1000
                })
            })
        },
        methods:{
            uploadVideo(e){
                
            },
             //上传视频
            initQiniu () {
                Qiniu.uploader({
                    runtimes: 'html5,flash,html4',
                    browse_button: 'pickfiles',
                    chunk_size: '4mb',
                    uptoken: this.form.uptoken,
                    domain: 'http://qiniu-plupload.qiniudn.com/',
                    get_new_uptoken: false,
                    auto_start: true,
                    max_retries: 3,
                    filters: {
                        max_file_size: '10mb',
                        prevent_duplicates: false,
                        mime_types: [
                            {title : 'mp4 files', extensions : 'mp4'} // 限定mp4后缀上传格式上传
                        ]
                    },
                    init: {
                        FilesAdded: (up, files) => {
                            console.log('文件就绪', files)
                            
                        },
                        BeforeUpload: (up, file) => {
                            console.log('上传之前', file);
                        },
                        UploadProgress: (up, file) => {
                            console.log('上传中 file',file);
                            this.progress = file.percent;
                        },
                        FileUploaded: (up, file, info) => {

                            console.log('文件上传完毕',info)
                            var res = JSON.parse(info);
                            this.form.videoUrl = qiniuVideoBaseUrl + res.key
                            this.form.bgimgUrl = qiniuVideoBaseUrl + res.key + '?vframe/jpg/offset/0'
                            this.$message({
                                message: '视频上传成功',
                                type: 'success'
                            })
                            console.log(this.form.url,'url')
                        },
                        Error: (up, err, errTip) => {
                            console.log('上传失败', err);
                        },
                        Key: (up, file) => {}
                    }
                });
            },
            deleteVideoList(){
                this.form.videoUrl = ''
                this.form.bgimgUrl = ''
            },
            getActivityList() {
                var params = {
                    data: {
                        page: 1,
                        size: 1000000,
                        storeNo: this.user.storeNo,
                        status: '',
                        name: ''
                    }
                };
                console.log(params);
                this.$fetch.post(activityList, params).then(res => {
                    var activityArray = [];
                    res.data.forEach(item=>{
                        if(item.status != 2){
                            activityArray.push({
                                value: item.id,
                                label: item.name
                            })
                        }
                    })
                    this.activityList = activityArray
                    
                    
                }).catch(err => {
                    this.$message({
                        message: err.message,
                        type: "warning",
                        duration: 1000
                    });
                });
            },
            //根据id获取活动商品
            getActivityGoods(){
                var params = {
                    data: {
                        storeNo: this.user.storeNo,
                        activityId: this.form.activityId,
                        page: 1,
                        size: 1000000,
                        name: '',
                        saleStatus: ''
                    }
                };
                this.$fetch.post(getActivityGoodsList, params).then(res => {
                    var activityGoods = [];
                    res.data.length > 0 && res.data.forEach(item => {
                        activityGoods.push({
                            value: item.relation,
                            label: item.goods_name
                        })
                    })
                    this.goodsList = activityGoods
                    this.divLoading = false
                    console.log(res,'activityGoods')
                }).catch(err => {
                    this.$message({
                        message: res.message,
                        type: "warning"
                    });
                });
            
            },

            handlActivityChange(){
                this.getActivityGoods()
            },
            handlChange(){},
            submit(){
                if(this.form.videoDesc === ''){
                    this.$message({
                         message: '视频介绍不能为空',
                         type: 'warning',
                         duration: 1000
                    })
                }else if(this.form.activityId === ''){
                    this.$message({
                         message: '选择视频关联活动',
                         type: 'warning',
                         duration: 1000
                    })
                }else if(this.form.relation === ''){
                    this.$message({
                         message: '选择视频关联活动商品',
                         type: 'warning',
                         duration: 1000
                    })
                }else if(this.form.videoUrl === ''){
                    this.$message({
                         message: '选择视频',
                         type: 'warning',
                         duration: 1000
                    })
                }else{
                    var params = {
                        "data": {
                            "id": '' + this.$route.params.id,
                            "relation":'' + this.form.relation,
                            "activityId": '' + this.form.activityId,
                            "videoDesc": this.form.videoDesc,
                            "videoUrl": this.form.videoUrl,
                            "shape": this.form.shape,
                            "bgimgUrl": this.form.bgimgUrl
                        }
                    } 
                    this.$fetch.post(goodsVideo, params).then(res => {
                        this.$message({
                            message: res.message,
                            type: 'success',
                            duration: 1000
                        })
                        setTimeout(() => {
                            this.$router.go(-1)
                        },1200)
                    }).catch(err => {
                        this.$message({
                            message: err.message,
                            type: 'warning',
                            duration: 1000
                        })
                    }) 
                } 
            },
           
        }
    }
</script>

<style scoped lang="less">
    @import url('../../style/activity.less');
    @import url('../../style/goods.less');
    .activity-right {
        h3{
            margin-bottom:20px
            
        }
    }
    .stock{

       display:inline-block;
       li{
           float: left;
           padding:0 10px;
           input{
               width:40px;
           }
       }
    }
    .addGoods-1{
        margin-top:20px;
        border-bottom:2px solid #000;
    }
    .addColor{
        margin-bottom:10px;
        margin-left:80%;
    }
    .submit{
        margin-left:0;
        margin-top:50px;
    }
    .form{
         margin-bottom:20px;
    }
    .progress {
    color: red;
    font-size: 30px;
    margin-top: 20px;
  }
</style>